<template>
  <view class="container">
    <button type="primary" class="scan-btn" @click="scanQRCode">扫描二维码</button>
    
    <view v-if="showPaymentConfirm" class="payment-confirm">
      <view class="payment-title">确认支付</view>
      <view class="payment-amount">支付金额: {{ paymentInfo.amount }} 积分</view>
      <view class="payment-to">收款用户ID: {{ paymentInfo.userId }}</view>
      
      <view class="btn-group">
        <button type="default" class="cancel-btn" @click="cancelPayment">取消</button>
        <button type="primary" class="confirm-btn" @click="confirmPayment">确认支付</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPaymentConfirm: false,
      paymentInfo: {
        userId: '',
        amount: 0,
        timestamp: 0,
        type: ''
      },
      currentUserId: ''
    };
  },
  onLoad() {
    // // 获取当前登录用户ID
    // const userInfo = uni.getStorageSync('userInfo');
    // if (userInfo) {
    //   this.currentUserId = userInfo.id;
    // } else {
    //   uni.showToast({
    //     title: '请先登录',
    //     icon: 'none'
    //   });
    //   setTimeout(() => {
    //     uni.navigateTo({
    //       url: '/pages/login/login'
    //     });
    //   }, 1500);
    // }
  },
  methods: {
    // 扫描二维码
    scanQRCode() {
      uni.scanCode({
        scanType: ['qrCode'],
        success: res => {
          try {
            // 解析二维码内容
            const paymentData = JSON.parse(res.result);
            
            // 验证数据格式
            if (!paymentData.userId || !paymentData.amount || !paymentData.timestamp) {
              throw new Error('无效的支付码');
            }
            
            // 验证是否是自己的二维码
            if (paymentData.userId == this.currentUserId) {
              uni.showToast({
                title: '不能给自己付款',
                icon: 'none'
              });
              return;
            }
            
            // 显示支付确认
            this.paymentInfo = paymentData;
            this.showPaymentConfirm = true;
            
          } catch (e) {
            uni.showToast({
              title: '无效的支付码',
              icon: 'none'
            });
          }
        },
        fail: err => {
          console.log('扫码失败', err);
        }
      });
    },
    
    // 取消支付
    cancelPayment() {
      this.showPaymentConfirm = false;
      this.paymentInfo = {
        userId: '',
        amount: 0,
        timestamp: 0,
        type: ''
      };
    },
    
    // 确认支付
    confirmPayment() {
      // 显示加载中
      uni.showLoading({
        title: '支付中...'
      });
      
      // 调用支付接口
      uni.request({
        url: '/api/payment/transfer',
        method: 'POST',
        data: {
          fromUserId: this.currentUserId,
          toUserId: this.paymentInfo.userId,
          amount: this.paymentInfo.amount,
          scoreType: this.paymentInfo.type === 'business' ? 'store_score' : 'ticket'
        },
        success: res => {
          uni.hideLoading();
          
          if (res.data.code === 1) {
            uni.showToast({
              title: '支付成功',
              icon: 'success'
            });
            
            // 关闭支付确认
            this.showPaymentConfirm = false;
            
            // 延迟返回上一页
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          } else {
            uni.showToast({
              title: res.data.msg || '支付失败',
              icon: 'none'
            });
          }
        },
        fail: err => {
          uni.hideLoading();
          uni.showToast({
            title: '网络错误，请稍后重试',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style>
.container {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #FFD000;
}

.scan-btn {
  width: 80%;
  height: 90rpx;
  border-radius: 45rpx;
  background-color: #07C160;
  color: #FFFFFF;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60rpx;
}

.payment-confirm {
  margin-top: 50rpx;
  width: 90%;
  padding: 40rpx 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
}

.payment-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  text-align: center;
  color: #333;
}

.payment-amount {
  margin: 20rpx 0;
  font-size: 34rpx;
  color: #333;
  font-weight: bold;
}

.payment-to {
  margin: 20rpx 0;
  font-size: 30rpx;
  color: #666;
}

.btn-group {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
}

.btn-group button {
  width: 45%;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cancel-btn {
  background-color: #F8F8F8;
  color: #333;
  border: 1rpx solid #E0E0E0;
}

.confirm-btn {
  background-color: #07C160;
  color: #FFFFFF;
}
</style>